<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中秋节快乐（刮一刮）</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        .ggl{
            height: 150px;
            position: relative;
        }
        .prize{
            width:100%;
            height: 150px;
            font-size: 30px;
            color: red;
            text-align: center;
            line-height: 150px;
            position: absolute;
            z-index: 1;
        }
        #canvas{
            position: absolute;
            z-index: 2;
        }
    </style>
</head>
<body>
    <div class="ggl">
        <div class="prize">谢谢惠顾</div>
        <canvas id="canvas"></canvas>
    </div>
    <script>
        canvas=document.getElementById("canvas");
        canvas.width=window.innerWidth;
        canvas.height=650;
        ctx=canvas.getContext("2d");
        ctx.fillStyle="orange";
        ctx.fillRect(0,0,window.innerWidth,150);
        canvas.addEventListener("touchstart",function(){
            canvas.addEventListener("touchmove",function(e){
                ctx.clearRect(e.touches[0].clientX,e.touches[0].clientY,30,30);
                e.preventDefault();
            });
        });
        arr=["谢谢惠顾","混合口味月饼一箱","千元零食大礼包","免费信阳十日游","我免费当你男友一个月","浪漫温馨鲜花一束"];
        i=Math.floor(Math.random()*arr.length);
        document.querySelector(".prize").innerHTML=arr[i];
    </script>
</body>
</html>